<template>
  <view
    class="text-[28rpx] fixed top-0 left-0 z-100 w-full h-full flex items-center justify-center bg-[rgba(0,0,0,0.5)]"
  >
    <view
      class="w-[80vw] h-[350rpx] bg-white p-[20rpx] box-border rounded-2 flex flex-col justify-between"
    >
      <view class="text-[34rpx] text-center font-bold">提示</view>
      <view class="flex justify-between flex-col flex-1">
        <view class="text-[32rpx] text-center mt-[40rpx]">发表言论需要授权手机号哦～</view>
        <view class="flex justify-between">
          <button
            @getphonenumber="getphonenumber"
            open-type="getPhoneNumber"
            class="flex-1 bg-blue text-white ml-2"
          >
            授权手机号
          </button>
        </view>
      </view>
    </view>
  </view>
</template>
<script lang="ts" setup>
import { getLoginPhoneAPI } from '@/service/login'
import { useUserStore } from '@/store'
import { storeToRefs } from 'pinia'
const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)
const emits = defineEmits(['hide-phone'])
const hidePhone = () => emits('hide-phone')

const getphonenumber = async (e: any) => {
  const res: any = await getLoginPhoneAPI({ code: e.detail.code, openid: userInfo.value.openid })
  const phonenumber = res?.data?.phonenumber
  userStore.setUserInfo({ ...userInfo.value, phonenumber })
  uni.showToast({
    title: '操作成功',
    icon: 'none',
    mask: true,
  })
  hidePhone()
}
</script>
